<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册</title>
		<!-- 引入Jquery -->
		<!-- <script src="../bootstrap-4.6.1/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script> -->
		<!-- 引入Bootstraps -->
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<!-- 引入自己的 -->
		<link rel="stylesheet" type="text/css" href="../public/public.css" />
		<link rel="stylesheet" type="text/css" href="../css/register.css" />
		<link rel="stylesheet" type="text/css" href="../font/iconfont.css" />
		<!-- 引入插件 -->
		<script src="../js/validate.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- 头部 -->
			<div class="header">
				<div class="main">
					<!-- logo -->
					<div class="head-logo">
						<h1>
							<a href="../index.html"></a>

						</h1>
					</div>
					<!-- 标题 -->
					<div class="head-title">
						欢迎注册
					</div>
					<!-- 跳转登录 -->
					<div class="head-login clear">
						已有账户？
						<a href="login.html" class="iconfont">请登录&#xe660;</a>
					</div>
				</div>
			</div>
			<!-- 内容 -->
			<div class="context">
				<div class="main">
					<!-- 注册进度 -->
					<div class="pro-bar">
						<div class="pro-item proitem1 active">
							<span class="step-index">1</span>
							<p class="step-desc">验证手机号</p>
						</div>
						<div class="pro-line pro-line1"></div>
						<div class="pro-item proitem2">
							<span class="step-index">2</span>
							<p class="step-desc">填写账号信息</p>
						</div>
						<div class="pro-line pro-line2"></div>
						<div class="pro-item proitem3 clear">
							<span class="step-index">3</span>
							<p class="step-desc">注册成功</p>
						</div>
					</div>
					<!-- form表单 -->
					<div class="from-box">
						<form class="fromes .was-validated">
							<!-- 1、验证手机号码 -->
							<div class="from-item1" >
								<!-- 手机号输入框 -->
								<div class="input-group mt-3 mb-3 form-group phone">
									<div class="input-group-prepend">
										<button type="button" class="btn btn-outline-secondary dropdown-toggle"
											data-toggle="dropdown">
											中国 0886
										</button>
										<div class="dropdown-menu">
											<a class="dropdown-item" href="javascript:void(0)">中国 0886</a>
											<a class="dropdown-item" href="javascript:void(0)">中国 0886</a>
											<a class="dropdown-item" href="javascript:void(0)">中国 0886</a>
										</div>
									</div>
									<input type="text" class="form-control " placeholder="建议使用常用手机号" id="card-phone">
									<div class="valid-feedback">验证成功！</div>
									<div class="invalid-feedback ">请输入手机号码！</div>
								</div>
								<!-- 验证框 -->
								<div class="verification">
									<input type="text" class="form-control" id="ver" placeholder="请输入验证码">
									<button type="button" class="btn btn-danger getver">获取验证码</button>
								</div>

								<!-- 下一步框 -->
								<button type="button" class="btn btn-danger btning next">下一步</button>
							</div>
							<!-- 2、填写账号信息 -->
							<div class="from-item2" style="display: none;">
								<!-- 设置密码 -->
								<div class="input-group">
									<div class="input-group-prepend">
										<span class="input-group-text">设置密码</span>
									</div>
									<input type="text" class="form-control" name="username"  id="passwd">
								</div>
								<!-- 确认密码 -->
								<div class="input-group">
									<div class="input-group-prepend">
										<span class="input-group-text">确认密码</span>
									</div>
									<input type="text" class="form-control" name="username" id="repasswd">
								</div>
								<!-- 立即注册 -->
								<button type="button" class="btn btn-danger register" id="register"  data-target="#myModal">立即注册</button>
								<!-- 密码不一致弹出框 -->
								  <!-- 模态框 -->
								  <div class="modal fade" id="myModal">
								    <div class="modal-dialog modal-sm">
								      <div class="modal-content">
								        <!-- 模态框头部 -->
								        <div class="modal-header">
								          <h4 class="modal-title">两次密码不一致</h4>
								          <button type="button" class="close" data-dismiss="modal">&times;</button>
								        </div>
								      </div>
								    </div>
								  </div>
							</div>
							<!-- 注册成功 -->
							<div class="from-item3" style="display: none;">
								<button type="button" class="btn btn-danger" id="relogin">跳转登录</button>
							</div>
						</form>
					</div>
				</div>
			</div>
			<!-- 底部 -->
			<div class="footer">

			</div>
		</div>
	</body>
	<script src="../public/public.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/register.js" type="text/javascript" charset="utf-8"></script>
</html>
